<template>
    <div ref="dom" class="charts chart-line"></div>
</template>

<script>
    import echarts from 'echarts'
    import tdTheme from './theme.json'
    import {
        on,
        off
    } from '@/libs/tools'
    echarts.registerTheme('tdTheme', tdTheme)
    export default {
        name: 'ChartLine',
        props: {
            value: Array,
            text: String,
            xAxisData: Array
        },
        data() {
            return {
                chartLine: null
            }
        },
        methods: {

        },
        mounted() {
            this.$nextTick(() => {
                let option = {
                    title: {
                        text: this.text,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['北环分部', '全部分部'],
                        orient: 'vertical',
                        right: '0',

                    },
                    grid: {
                        left: '3%',
                        right: '90px',
                        bottom: '3%',
                        top: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        name: '日期',
                        nameTextStyle: {
                            color: '#000'
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: this.xAxisData
                    },
                    yAxis: {
                        name: '次数',
                        nameTextStyle: {
                            color: '#000'
                        },
                        type: 'value',

                    },
                    series: this.value
                }
                this.dom = echarts.init(this.$refs.dom)
                this.dom.setOption(option)

            })
        }
    }
</script>

<style lang='less' scoped>

</style>